<template>
    <div class="page-wrap">
        <div>
            <filter-form @change="handleSearch" />
        </div>
        <a-divider class="full-divider-h" />
        <flexbox class="margin-b-8" justify="flex-end">
            <a-button type="primary" @click="handleGenerateTask">生成路标任务</a-button>
            <a-button type="primary" class="margin-l-8" @click="handleRefresh">刷新</a-button>
            <a-button type="primary" class="margin-l-8" :disabled="!selectedRowKeys.length" @click="handleMultiSet">批量设置</a-button>
        </flexbox>
        <custom-table
            autoResize
            rowKey="id"
            size="small"
            :loading="loading"
            :columns="tableColumns"
            :data-source="newList"
            :pagination="paginationConfig"
            @change="handleTableChange"
            :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, getCheckboxProps }"
        >
            <template #catalogType="{ text }">
                {{ $filters.catalogTypeFilter(text) }}
            </template>
            <template #isAnnualPlanning="{ text }">
                {{ text === '1' ? '是' : '否' }}
            </template>
            <template #signpostPlanPeriod="{ record, index }">
                <div>
                    <a-select size="small" placeholder="请选择" v-model:value="record.signpostPlanPeriod" @change="handleSelectChange($event, index)">
                        <a-select-option key="1"> 季度 </a-select-option>
                        <a-select-option key="2"> 半年度 </a-select-option>
                        <a-select-option key="3"> 年度 </a-select-option>
                    </a-select>
                </div>
            </template>
            <template #isSignpostPlan="{ record, index }">
                <a-checkbox v-model:checked="record.isSignpostPlan" @change="checkChange($event, index)" />
            </template>
        </custom-table>
        <MultiSetModal ref="MultiSetModalRef" @success="handleSetMultiSuccess" />
        <LubiaoModal ref="lubiaoModalRef" />
    </div>
</template>

<script lang="ts">
import { deepClone } from '@/utils/util';
import api from '@/api';
import MultiSetModal from './components/MultiSetModal.vue';
import LubiaoModal from './components/LubiaoModal.vue';
import CustomTable from '@/components/Table/CutomTable.vue';
import FilterForm from './components/filterForm.vue';
import { useTableData, useTableLoading, usePagination, useTableColumns, useTableFormSearch, useTableRowSelect } from '@/components/Table/hooks/index';
import { useMountedAndActivated } from '@/hooks/common/useMountedAndActivated';
import { ref, unref, reactive, toRefs, watch, defineComponent } from 'vue';
import { message } from 'ant-design-vue/es';
export default defineComponent({
    components: {
        FilterForm,
        CustomTable,
        MultiSetModal,
        LubiaoModal
    },
    setup() {
        const { loading, setLoading } = useTableLoading();
        const { paginationConfig, setPaginationConfig } = usePagination();
        const { columns: tableColumns } = useTableColumns('lubiaoSetting');
        const { list, getList, handleTableChange, setSearchQuery } = useTableData(setLoading, paginationConfig, setPaginationConfig, 'lubiaoSetting');
        const { handleSearch } = useTableFormSearch(setPaginationConfig, setSearchQuery, getList);
        const { selectedRowKeys, selectedRows, allSelectedRows, onSelectChange, setSelectRows } = useTableRowSelect();
        const MultiSetModalRef = ref<any>();
        const lubiaoModalRef = ref<any>();
        const state = reactive<any>({
            newList: []
        });
        const checkChange = (val, index) => {
            handleSave(index);
        };
        const handleSelectChange = (val, index) => {
            handleSave(index);
        };
        const handleSave = async (index, isRefresh = false) => {
            if (index >= 0) {
                let query: any = deepClone(state.newList[index]);
                query = {
                    ...query,
                    isSignpostPlan: query.isSignpostPlan ? '1' : '0'
                };
                const { success, errorMsg } = await api.signpostManagementModel.save([query]);
                if (success) {
                    isRefresh && getList();
                } else {
                    message.error(errorMsg);
                }
            }
        };
        const handleMultiSet = () => {
            unref(MultiSetModalRef).open(allSelectedRows.value);
        };
        const getCheckboxProps = (record) => {
            return {
                disabled: !(record.productManagers && record.productManagers.length),
                ...record
            };
        };
        const handleSetMultiSuccess = () => {
            getList();
            setSelectRows([], []);
        };
        const handleRefresh = async () => {
            const { success, errorMsg } = await api.annualPlanningModel.refreshData();
            if (success) {
                message.success('刷新成功');
            } else {
                message.error(errorMsg);
            }
        };
        const handleGenerateTask = () => {
            unref(lubiaoModalRef).open(allSelectedRows.value);
        };
        useMountedAndActivated(getList);
        watch(
            () => list.value,
            () => {
                state.newList = list.value.map((item) => ({
                    ...item,
                    id: item.id.toString(),
                    isSignpostPlan: !!+item.isSignpostPlan
                }));
            },
            {
                deep: true,
                immediate: true
            }
        );
        return {
            MultiSetModalRef,
            lubiaoModalRef,
            ...toRefs(state),
            list,
            tableColumns,
            loading,
            paginationConfig,
            handleTableChange,
            handleSearch,
            checkChange,
            handleSelectChange,
            selectedRowKeys,
            selectedRows,
            onSelectChange,
            handleMultiSet,
            handleSetMultiSuccess,
            getCheckboxProps,
            handleRefresh,
            handleGenerateTask
        };
    }
});
</script>
<style scoped lang="less">
.page-wrap {
    min-height: 100%;
    padding: 12px 24px;
    background: #fff;
    .table-title {
        font-size: 16px;
        font-weight: bold;
    }
    ::v-deep(.full-divider-h) {
        margin-top: 0px !important;
    }
}
</style>